<template>
  <div class="dd">
    <div class="btnList">
      <el-button @click="addRole">新增角色</el-button>
      <el-button @click="deleteRole">删除角色</el-button>
      <el-button @click="editRole">修改角色</el-button>
      <el-button @click="authorization">角色授权</el-button>
    </div>
    <div v-if="roleList.result">
      <el-table
        ref="multipleTable"
        :data="roleList.result.records"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @select="select"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="rname" label="角色名称"> </el-table-column>
        <el-table-column prop="rkey" label="角色标识"> </el-table-column>
        <el-table-column prop="rstatus" label="角色状态" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="rdescription"
          label="角色描述"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="updatedTime"
          label="更新时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <MyPagenation
        :currentChange="handleCurrentChange"
        :sizeChange="handleSizeChange"
        :currentPageSync="pageInfo.page"
        :pageSize="pageInfo.size"
        :total="roleList.result.total"
      ></MyPagenation>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog
      title="新增角色"
      :visible.sync="addDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px" label-position="top">
        <el-form-item label="角色名称">
          <el-input v-model="form.rname"></el-input>
        </el-form-item>

        <el-form-item label="角色标识">
          <el-select v-model="form.rkey" placeholder="请选择角色标识">
            <el-option label="标识11" value="0"></el-option>
            <el-option label="标识22" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="form.rdescription"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subUserInfo('form')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 角色授权弹窗 -->
    <el-dialog
      title="角色授权"
      :visible.sync="authDialogVisible"
      width="30%"
      :before-close="authHandleClose"
    >
      <el-tree
        ref="tree"
        :data="filterResoList"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        @check-change="clickNode"
      >
      </el-tree>
      <el-checkbox @change="allCleChange" class="allCle">全选</el-checkbox>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subRoleAuth">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapState } from "vuex";
import {
  insertRole,
  updateRole,
  deleteRole,
  roleAuth,
} from "@/api/userManage/api";
export default {
  name: "RoleManage",
  data() {
    return {
      roleIdList: [],
      roleAuthList: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {
        rdescription: "",
        rkey: "",
        rname: "",
        // createdBy: "",
        // createdTime: "",
        // id: "",
        // isType: "",
        // rflag: "",
        // rremarks: "",
        // rstatus: "",
        // updatedBy: "",
        // updatedTime: ""
      },
      // 角色授权
      authDialogVisible: false,
      // 添加角色
      addDialogVisible: false,
      pageInfo: {
        page: 1,
        size: 10,
        search: "",
      },
      multipleSelection: [],
      options: [
        {
          value: "选项1",
          label: "重置密码",
        },
        {
          value: "选项2",
          label: "删除",
        },
        {
          value: "选项3",
          label: "修改",
        },
      ],
      value: "",
    };
  },
  methods: {
    ...mapActions("userList", ["actionGetRoleList", "actionGetResoList"]),
    // 重置form表单
    resetForm() {
      this.form = {
        rdescription: "",
        rkey: "",
        rname: "",
      };
    },
    // 全选按钮事件
    allCleChange(isChecked) {
      // console.log(isChecked)  //ischecked 是是否选中的boolen
      if (isChecked) {
        this.setCheckedKeys();
      } else {
        this.resetChecked();
      }
      setCheckedKeys();
    },
    // 通过key设置全选
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([1, 2, 3]);
    },
    // 设置全不选
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    // 点击节点的回调
    clickNode(data, self, children) {
      let arr = [JSON.parse(JSON.stringify(data))];
      console.log(arr);
      let thisa =this
      function addOrJian(arr, flag) {
        if (flag) {
          arr.forEach((item) => {
            if (item.children.length) {
              console.log(this,thisa)
              thisa.roleAuthList.push(item.id);
              addOrJian(item.children,flag);
            } else {
              thisa.roleAuthList.push(item.id);
            }
          });
        }else{
          arr.forEach((item) => {
            if (item.children.length) {
              thisa.roleAuthList.splice(thisa.roleAuthList.findIndex(id => id == item.id),1)
              addOrJian(item.children);
            } else {
              thisa.roleAuthList.splice(thisa.roleAuthList.findIndex(id => id == item.id),1)
            }
          });
        }
      }
      addOrJian(arr,self)
      console.log('idLIstaaa',data,this.roleAuthList)
    },
    change(value) {
      console.log(value);
    },
    // 新增角色
    addRole() {
      this.resetForm();
      this.addDialogVisible = true;
    },
    // 角色授权
    authorization() {
      if (!this.roleIdList.length) {
        this.$message.error("请选择一个角色后授权");
      } else {
        this.authDialogVisible = true;
      }
    },
    // 关闭对话框
    handleClose() {
      this.addDialogVisible = false;
      this.toggleSelection();
    },
    // 授权对话框关闭
    authHandleClose() {
      this.authDialogVisible = false;
      this.toggleSelection();
      this.roleAuthList = []
    },
    // 页面页码变化
    handleCurrentChange(val) {
      this.pageInfo.page = val;
      this.actionGetRoleList(this.pageInfo);
    },
    handleSizeChange(val) {
      this.pageInfo.size = val;
      this.actionGetRoleList(this.pageInfo);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        // 清空resoIdList，form
        this.roleIdList = [];
        this.form = {
          rdescription: "",
          rkey: "",
          rname: "",
        };
      }
    },

    // 新增修改弹窗关闭
    async subUserInfo(form) {
      this.addDialogVisible = false;
      if (this.roleIdList.length) {
        // 修改
        updateRole(this.form);
        this.actionGetRoleList(this.pageInfo);
      } else {
        // 新增
        const res = await insertRole(this.form);
        if (res.success) {
          this.$message.success("新增成功");
          this.actionGetRoleList(this.pageInfo);
        } else {
          this.$message.error("新增失败");
        }
      }
    },
    // 授权弹窗关闭
    async subRoleAuth() {
      this.authDialogVisible = false;
      this.toggleSelection();
      this.roleAuthList = []
      const res = await roleAuth(this.roleIdList[0],this.roleAuthList);
      if(res.success){
        this.$message.success('授权成功')
        this.actionGetRoleList(this.pageInfo);
      }else{
        this.$message.error('授权失败')
      }
    },
    // 修改角色按钮
    editRole() {
      if (!this.roleIdList.length) {
        this.$message.error("请选择一个要修改的角色");
      } else {
        this.addDialogVisible = true;
      }
    },
    // 点击选项框
    select(selection, row) {
      this.roleIdList = [];
      selection.forEach((item) => {
        this.roleIdList.push(item.id);
      });
      this.form = row;
      console.log(this.roleIdList);
    },
    // 树形折叠相关函数
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除角色
    async deleteRole() {
      if (!this.roleIdList.length) {
        this.$message.error("请选择一个要删除的角色");
      } else {
        const res = await deleteRole(this.form.id);
        if (res.success) {
          this.$message.success("删除成功");
          this.toggleSelection();

        } else {
          this.$message.error(res.message);
        }
      }
      this.actionGetRoleList(this.pageInfo);
    },
  },
  mounted() {
    this.actionGetResoList({ page: 1, size: 20 });
    this.actionGetRoleList(this.pageInfo);
  },
  computed: {
    ...mapState("userList", ["roleList", "resoList"]),
    ...mapGetters("userList", ["filterResoList"]),
  },
};
</script>

<style scoped lang="less">
@import "../../../assets/style/table.less";

::v-deep .el-dialog {
  background-color: rgba(2, 28, 33, 0.8);
  border-radius: 30px;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    .el-form-item {
      width: 100%;
      .el-select {
        width: 100%;
        height: 40px;
      }
      .el-input__inner {
        width: 100%;
        height: 40px;
      }
    }
  }
  .el-dialog__footer {
    text-align: center;
    .el-button {
      width: 160px;
      height: 50px;
      background-color: #00e7e7;
    }
  }
  .el-dialog__body {
    .el-tree {
      background-color: transparent;
      .el-tree-node__expand-icon {
        color: #00e7e7;
      }
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #00484d;
        border-color: #00e7e7;
        ::before {
          background-color: #00e7e7;
        }
      }
    }
    .allCle {
      margin-left: 10px;
      margin-top: 10px;
    }
  }
}
</style>

